<!--
 * @Author: Haochen
 * @Date: 2021-12-08 14:59:49
 * @LastEditTime: 2021-12-11 14:10:08
 * @FilePath: \students-system\src\views\classes\AddClass.vue
-->
<template>
  <div>
    <h4>新增班级</h4>
    <el-select v-model="newClass.subjectsId" placeholder="请选择专业">
      <el-option
        v-for="subject in subjects"
        :key="subject._id"
        :value="subject._id"
        :label="subject.name"
      >
      </el-option>
    </el-select>
    <br />
    <h5>填写新增班级名称</h5>
    <el-input
      v-model.lazy="newClass.name"
      placeholder="请输入内容"
      style="width=250px"
    ></el-input>
    <br />
    <el-button type="primary" @click="addNewClass">确认新增</el-button>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const { mapActions: subjectsActions, mapState: subjectsState } =
  createNamespacedHelpers("subjects");

export default {
  data() {
    return {
      newClass: {},
    };
  },

  computed: {
    ...subjectsState({
      subjects: "rows",
    }),
  },
  created() {
    this.getSubjectsAsync();
  },
  methods: {
    ...subjectsActions(["getSubjectsAsync"]),

    async addNewClass() {
      const { data: res } = await this.$api.classes.addNewClass(this.newClass);
      if (res.code) {
        alert(res.message);

        this.newClass = {};
      }
    },
  },
};
</script>

<style></style>
